<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北京景点介绍</title>
    <style>
        body {
            display: grid;
            gap: 20px; /* 块之间的间距 */
            padding: 20px; /* 页面内边距 */
            font-family: Arial, sans-serif; /* 字体样式 */
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应列 */
        }

        .card {
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 8px; /* 圆角效果 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-align: left; /* 文本左对齐 */
            background-color: #f9f9f9; /* 背景色 */
            padding: 10px; /* 内容内边距 */
        }

        .card img {
            width: 100%; /* 图片宽度自适应 */
            height: 200px; /* 固定高度 */
            object-fit: cover; /* 保持图片比例并填充 */
        }

        h3 {
            margin: 0; /* 去除默认的外边距 */
            font-size: 18px; /* 设置字体大小 */
            font-weight: bold; /* 设置标题加粗 */
        }

        p {
            margin: 5px 0; /* 段落上下外边距 */
            font-size: 14px; /* 设置段落字体大小 */
        }
    </style>
</head>
<body>

    <div class="card">
        <img src="http://cases.geekfun.website/images/beihaigongyuan.jpg" alt="后海">
        <h3>后海</h3>
        <p>说是“海”，其实是一个巨大的人工湖，是旧时皇家独享的一泓清池。后海地处北京市中心，距天安门仅有四、五站地，与著名的北海一水相连，与景山、故宫遥遥相对。</p>
    </div>

    <div class="card">
        <img src="http://cases.geekfun.website/images/beihaiyuanboyuan.jpg" alt="南锣鼓巷">
        <h3>南锣鼓巷</h3>
        <p>北京南锣鼓巷是北京最古老的街区之一，也位列规划中的25片旧城保护区之中。但是近几年，却成为许多时尚杂志报道的热点，不少电视剧在这里取景拍摄，许多国外旅行者把其列为在北京的必游景点。</p>
    </div>

    <div class="card">
        <img src="http://cases.geekfun.website/images/houhai.jpg" alt="北海公园">
        <h3>北海公园</h3>
        <p>北海公园原为辽燕京城东北一片湖泊，名金海。中有小岛名瑶屿，辽在此建“瑶屿行宫”。</p>
    </div>

    <div class="card">
        <img src="http://cases.geekfun.website/images/nanluoguxiang.jpg" alt="北海园博园">
        <h3>北海园博园</h3>
        <p>北海园博园以“花海丝路·绿映珠城”为主题，是2014年第四届广西园博会的举办地，是城市绿心的核心组成部分，包括一主两副三个园区，总用地面积约298公顷，属城市规划绿地。</p>
    </div>

</body>
</html>
